import React, { Component } from 'react';
import CommonHeader from './common';
import { Layout,Input, Upload,message,Select,Radio } from 'antd';
import $ from 'jquery';
import './css/edit.css';

const { TextArea } = Input;
const Option = Select.Option;
const RadioGroup = Radio.Group;
const {
  Header,Content,Footer
} = Layout;

class Edit extends Component {

    constructor (props) {
		super(props);
		this.state = {
            student:[],
            breakValue: 0,
            major:"信息安全",
            class:"1701",
			photo:"https://i.loli.net/2019/02/28/5c77aa084a196.png",
        };
        this.upload  = this.upload.bind(this); 
        this.classChange  = this.classChange.bind(this); 
        this.majorChange  = this.majorChange.bind(this); 
    }
    
    
      onChange = (e) => {
        this.setState({
          breakValue: e.target.value,
        });
      }
    
    beforeUpload(file) {
		const ispng = file.type === 'image/png';
		if (!ispng) {
		  message.error('头像暂时只支持png图片');
		}
		const isLt2M = file.size / 1024 / 1024 < 2;
		if (!isLt2M) {
		  message.error('请上传图片大小在2M以下的头像');
        }
        return ispng && isLt2M;
      }

      majorChange(value) {
        this.setState({
            major:value,
        });
      }

      classChange(value){
          this.setState({
            class:value,
          });
      }
      
      upload(file) {
		let formData = new FormData();
		formData.append("smfile",file);
        $.ajax({
            type : "POST",
            contentType: false,
            processData: false,
            url : "https://sm.ms/api/upload",
            data : formData,
            success : (info) => {
                if(info.code === "success"){
                    {
                        let url = info.data.url;
						this.setState({
                           photo:url,
                        });	
                        message.success("上传成功",10);
					}
                  }
                }
            });
        }

        reset() {
            $("#name").val("姓名");
            $("#id").val("");
            $("#acade").val("");
            $("#fail_number").val("");
            $("#arre").val("");
            $("#ml").val("");
            $("#study").val("");
            $("#health").val("");
            $("#tech").val("");
            $("#culture").val("");
        }

        submit = () => {
            if ($("#name").val()!=="姓名" 
            && $("#id").val()!=="" 
            && $("#acade").val()!=="" 
            && $("#fail_number").val()!=="" 
            && $("#arre").val()!=="" 
            && $("#ml").val()!=="" 
            && $("#study").val()!=="" 
            && $("#health").val()!=="" 
            && $("#tech").val()!=="" 
            && $("#society").val()!==""
            && $("#culture").val()!==""){
                let json = {
                    "id" : parseInt($("#id").val()),
                    "student_name" : $("#name").val(),
                    "academy" : $("#acade").val(),
                    "fail_number" : parseInt($("#fail_number").val()),
                    "ml" : parseInt($("#ml").val()),
                    "study": parseInt($("#study").val()),
                    "health": parseInt($("#health").val()),
                    "tech":parseInt($("#tech").val()),
                    "society":parseInt($("#society").val()),
                    "culture":parseInt($("#culture").val()),
                    "arre":parseInt($("#arre").val()),
                    "break_rule":this.state.breakValue,
                    "classname":this.state.major+this.state.class,
                    "state":0,
                    "scholarship_type":0,
                    "photo":this.state.photo,
                    "apply":$("#apply").val(),
                    "basic_score":parseInt($("#study").val())*0.5+parseInt($("#ml").val())*0.3+parseInt($("#health").val())*0.2,
                };
                $.ajax({
                    url : `${global.url}/insert`,	//请求url
                    type : "POST",	//请求类型  post|get
                    // data : "key=value&key1=value2",	//后台用 request.getParameter("key");
                    dataType: "json",    //返回数据的 类型 text|json|html--
                    contentType: "application/json;charset=utf-8",
                    data:  JSON.stringify(json),
                    success: (response3) => {
                        if(response3.code === 200){
                            message.success("提交成功",2);
                        }else{
                            message.error("提交失败，该学号已存在或数据格式错误",2);
                        }
                    },
                    error:() => {message.error("更改失败，请检查网络设置",2);},
                });
            }else{
                message.warning("信息未填写完全",2);
            }
        }

  render() {
    return (
        <Layout>
        <Header className="header"><CommonHeader></CommonHeader></Header>
          <Content>
            <div className="container">
              <div className="cardcase">
                  <div className="editcard">
                      <Upload 
                      name="avatar"
                      listType="picture-card"
                      className="head-pic-ctn"
                      showUploadList={false}
				      action={this.upload}
				      beforeUpload={this.beforeUpload}>
                          <img src={this.state.photo} alt="照片加载失败"/>
                          <a href="###">点击上传照片</a>
                      </Upload>
                      <form><input type="text" defaultValue="姓名" id="name" /></form>
                      <form className="input">
                          <h1>学号:</h1>
                          <i> &#xe661;</i>
                          <input type="text" id="id" placeholder="请输入学号" />
                      </form>
                      <form className="input">
                          <h1>专业班级:</h1>
                          <i> &#xe661;</i>
                          <Select defaultValue="信息安全" id="major" onChange={this.majorChange} style={{width:'40%',display:"inline-block"}}>
                            <Option value="信息安全">信息安全</Option>
                            <Option value="计科">计科</Option>
                            <Option value="物联网">物联网</Option>
                            <Option value="电科">电科</Option>
                            <Option value="通信">通信</Option>
                            <Option value="电信">电信</Option>
                            <Option value="测控">测控</Option>
                          </Select>
                          <Select defaultValue="1701" id="class" onChange={this.classChange} style={{width:'40%',display:"inline-block"}}>
                            <Option value="1501">1501</Option>
                            <Option value="1502">1502</Option>
                            <Option value="1503">1503</Option>
                            <Option value="1504">1504</Option>
                            <Option value="1601">1601</Option>
                            <Option value="1602">1602</Option>
                            <Option value="1603">1603</Option>
                            <Option value="1604">1604</Option>
                            <Option value="1701">1701</Option>
                            <Option value="1702">1702</Option>
                            <Option value="1703">1703</Option>
                            <Option value="1704">1704</Option>
                          </Select>
                      </form>
                      <form className="input">
                          <h1>学院:</h1>
                          <i> &#xe661;</i>
                          <input type="text" id="acade" placeholder="请输入数字" />
                      </form>
                      <form className="input">
                          <h1>挂科数:</h1>
                          <i> &#xe661;</i>
                          <input type="text" id="fail_number" placeholder="请输入数字" />
                      </form>
                      <form className="input">
                            <h1>是否违纪:&nbsp;</h1>
                            <RadioGroup onChange={this.onChange} value={this.state.breakValue}>
                                <Radio value={1}>是</Radio>
                                <Radio value={0}>否</Radio>
                            </RadioGroup> 
                      </form>
                      <form className="input">
                          <h1>欠费金额:</h1>
                          <i> &#xe661;</i>
                          <input type="text" id="arre" placeholder="单位：元，无欠费则填0" />
                      </form>
                      <form className="input">
                          <h1>品德测评分数:</h1>
                          <i> &#xe661;</i>
                          <input type="text" id="ml" placeholder="请录入品德测评分数" />
                      </form>
                      <form className="input">
                          <h1>身心测评分数:</h1>
                          <i> &#xe661;</i>
                          <input type="text" id="health" placeholder="请录入身心健康测评分数" />
                      </form>
                      <form className="input">
                          <h1>课程学习测评分数:</h1>
                          <i> &#xe661;</i>
                          <input type="text" id="study" placeholder="请录入课程学习测评分数" />
                      </form>
                      <form className="input">
                          <h1>科技实践测评分数:</h1>
                          <i> &#xe661;</i>
                          <input type="text" id="tech" placeholder="请录入科技实践测评分数" />
                      </form>
                      <form className="input">
                          <h1>社会公益测评分数:</h1>
                          <i> &#xe661;</i>
                          <input type="text" id="society" placeholder="请录入社会公益测评分数" />
                      </form>
                      <form className="input">
                          <h1>校园文化测评分数:</h1>
                          <i> &#xe661;</i>
                          <input type="text" id="culture" placeholder="请录入校园文化测评分数" />
                      </form>
                      <div className="input-text">
                          <h1>个人申请阐述:</h1>
                          <TextArea id="apply" autosize={{ minRows: 4, maxRows: 6 }} />
                      </div>
                      <button onClick={this.reset}>重置</button>
                      <button onClick={this.submit}>提交</button>
                  </div>
              </div>
            </div>
            </Content>
          <Footer><div className="copyright"><p>版权所有 © 2019-现在 shijiewubaiqiang.top</p></div></Footer>
        </Layout>
    );
  }
}

export default Edit;
